<template>
  <div class="box">
    <!-- 头部 -->
    <div class="header">
      <van-icon name="wap-home-o" @click="goHome" />
      <p class="title">购物订单</p>
      <div>
        <van-icon name="search" class="search" @click="goSearch" />
        <van-icon name="shopping-cart-o" @click="goShopCart" />
      </div>
    </div>
    <!-- 
       <div class="header">
      <van-icon name="wap-home-o" @click="goHome" />
      <p class="title">值得买</p>
      <div>
        <van-icon name="search" class="search" />
        <van-icon name="shopping-cart-o" @click="goShopCart" />
      </div>
    </div>
     -->
    <div class="warn">
      <!-- fff8d8 -->
      <div class="left">
        <img src="https://yanxuan.nosdn.127.net/939c226828381b3d8a2f7872f5c1a6d3.png" alt="" />
      </div>
      <div class="right">因疫情影响，部分地区无法配送公告</div>
    </div>
    <!-- 地址信息 -->
    <div class="location">
      <!-- 左侧名字和默认 -->
      <div class="left">
        <div class="userName">{{ userAdderList[0]?.consignee }}</div>
        <div class="default">默认</div>
      </div>
      <!-- 右侧地址和电话 -->
      <div class="right">
        <div class="phone">{{ userAdderList[0]?.phoneNum }}</div>
        <div class="adress">{{ userAdderList[0]?.userAddress }}</div>
      </div>

      <van-icon class="sign" name="arrow" />
    </div>
    <div class="shops">
      <div class="item" v-for="(item, index) in detailList" :key="item.skuId">
        <div class="shop">
          <img :src="item.imgUrl" alt="" />
          <!-- 图片左侧数据 -->
          <div class="textData">
            <span class="top">{{ item.skuName }}</span>
            <div class="price">
              <span>￥ {{ item.orderPrice }}</span>
            </div>
          </div>
          <div></div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="left">应付：￥ {{ total }}.00</div>
      <div class="right">提交订单</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import requests from "@/utils/request";
import { Icon } from "vant";
Vue.use(Icon);
export default {
  data() {
    return {
      detailList: [],
      userAdderList: {},
    };
  },
  methods: {
    // 获取订单信息
    async getOrderMess() {
      let result = await requests({ url: `/api/order/auth/trade`, method: "get" });

      this.detailList = result.data.detailArrayList;
      this.userAdderList = result.data.userAddressList;
    },
    // 去首页
    goHome() {
      this.$router.push({ name: "home", params: { index: 0 } });
    },
    // 去购物车
    goShopCart() {
      // {name:'shopcart',params:{index:0}}
      this.$router.push({ name: "shopcart", params: { index: 2 } });
    },
    // 去搜索
    goSearch() {
      this.$router.push("/innerSearch");
    },
  },
  // 计算属性
  computed: {
    total() {
      return this.detailList.reduce((pre, item) => {
        return (pre = pre + item.orderPrice);
      }, 0);
    },
  },
  // 挂载完毕
  mounted() {
    this.getOrderMess();
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  background-color: #eee;
  overflow-y: auto;
  /*头部*/
  .header {
    position: fixed;
    height: 50px;
    width: 100%;
    display: flex;
    background-color: #fafafa;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 99;
    top: 0;
    border-bottom: 1px solid #aaa;
    .title {
      flex: 1;
      text-align: center;
      font-size: 18px;
    }
    .search {
      margin-right: 20px;
    }
  }
  /*警告*/
  .warn {
    height: 40px;
    width: 100%;
    background-color: #fff8d8;
    margin-top: 60px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
    .left {
      img {
        height: 15px;
        width: 14px;
      }
    }
    .right {
      color: #f48f14;
      font-size: 16px;
      padding: 0 10px;
    }
  }
  /*地址*/
  .location {
    height: 75px;
    width: 100%;
    font-size: 14px;
    background-color: white;
    margin-top: 10px;
    display: flex;
    align-items: center;
    .left {
      height: 38px;
      width: 60px;
      margin-left: 10px;
      .default {
        font-size: 13px;
        color: red;
      }
    }
    .right {
      flex: 1;
      height: 35px;
      text-align: start;
      .adress {
        font-size: 12px;
      }
    }
    /*地址右侧图标*/
    .sign {
      margin-right: 10px;
    }
  }
  .shops {
    margin-top: 10px;
    width: 100%;
    background-color: #fff;
    margin-bottom: 60px;
    .item {
      width: 100%;
      height: 103px;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 0 20px;
      box-sizing: border-box;
      .checkbox {
        height: 19px;
        width: 19px;
        margin: 0 10px;
      }
      .shop {
        flex: 1;
        width: 221px;
        height: 86px;
        background-color: #eee;
        display: flex;
        align-items: center;
        padding-bottom: 5px;
        border-bottom: 1px solid black;
        img {
          height: 86px;
          width: 86px;
        }
        /*左侧数据*/
        .textData {
          flex: 1;
          height: 100%;
          font-size: 16px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          /*左侧上方，描述信息*/
          .top {
            padding: 5px 10px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          /*左侧下方*/
          .price {
            height: 26px;
            margin: 5px 10px;
            display: flex;
            justify-content: space-between;
            line-height: 26px;
          }
        }
      }
    }
  }
  /* 下方*/
  .bottom {
    position: fixed;
    bottom: 0;
    background-color: white;
    height: 50px;
    width: 100%;
    display: flex;
    border-top: 1px solid #aaa;
    .left {
      flex: 1;
      font-size: 16px;
      line-height: 50px;
      text-align: start;
      margin-left: 20px;
      color: red;
    }
    .right {
      width: 113px;
      background-color: red;
      color: white;
      font-size: 16px;
      text-align: center;
      line-height: 50px;
    }
  }
}
</style>
